<template>
    <div class="inventory">
        <Header></Header>
        <el-row class="content">
            <el-col :span="6">
                <div class="left tc">
                    <div class="progress">
                        <div class="circle" ref="circle">
                            <span class="icon"
                                  ref="progressSign"
                                  :style="`left: ${ signLeft }; top: ${ signTop };`"></span>
                            <span class="text">当前进度</span>
                            <strong class="percent">{{ percent }}%</strong>
                        </div>
                        <p class="title tc">共有5台设备待处理</p>
                    </div>
                    <p>
                        <button type="button" class="pause" @click="pause">暂停盘点</button>
                    </p>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="right">
                    <el-row>
                        <el-col :span="10">
                            <div class="content item">
                                <div class="segment fr"></div>
                                <ul class="item-content">
                                    <li class="block">
                                        <p class="title">
                                            <i></i>
                                            <span class="area">一楼会议室</span>
                                            已发现2台固定资产待处理
                                            <span class="fr status">正在盘点</span>
                                        </p>
                                        <ul class="detail">
                                            <li class="waiting">
                                                <span>苹果电脑</span>
                                                <span>132546978</span>
                                                <i></i>
                                            </li>
                                            <li class="correct">
                                                <span>苹果电脑</span>
                                                <span>132546978</span>
                                                <i></i>
                                            </li>
                                            <li class="remind">
                                                <span>苹果电脑</span>
                                                <span>132546978</span>
                                                <i></i>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="block">
                                        <p class="title">
                                            <i></i>
                                            <span class="area">一楼会议室</span>
                                            已发现2台固定资产待处理
                                            <span class="fr status">正在盘点</span>
                                        </p>
                                        <ul class="detail">

                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div class="content change-asset">
                                <div class="not-fount">
                                    <p class="title">
                                        这些固定资产找不到了
                                        <span class="fr">共3台固定资产</span>
                                    </p>
                                    <ul class="list">
                                        <li class="fl item">
                                            <p class="name">苹果电脑</p>
                                            <p class="position">原始位置：一楼会议室</p>
                                            <p class="number">设备编号：0707070007</p>
                                            <el-button type="primary" class="button" @click="handleAssetVisible = true">
                                                立即处理
                                            </el-button>
                                        </li>
                                    </ul>
                                </div>
                                <div class="segment"></div>
                                <div class="move not-fount">
                                    <p class="title">
                                        这些固定资产被移动了
                                        <span class="fr">共3台固定资产</span>
                                    </p>
                                    <ul class="list">
                                        <li class="fl item">
                                            <p class="name">苹果电脑</p>
                                            <p>设备编号：84356132156</p>
                                            <p>原始位置：盘丝洞</p>
                                            <p>当前位置：夏威夷</p>
                                            <el-button type="primary" class="button" @click="moveAssetVisible = true">
                                                立即处理
                                            </el-button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <!--找不着弹窗-->
        <el-dialog :visible.sync="handleAssetVisible" width="40%">
            <el-row class="dialog-handle">
                <el-col :span="8" class="left">
                    <div class="text tc">
                        <p class="title">立即处理</p>
                        <p>—— 固定资产找不到了 ——</p>
                    </div>
                </el-col>
                <el-col :span="16" class="right">
                    <ul class="list tc">
                        <li>
                            <span>固定资产名称</span>
                            <span class="name">如意金箍棒</span>
                        </li>
                        <li>
                            <span>固定资产编号</span>
                            <span class="number">0707007</span>
                        </li>
                        <li>
                            <span>绑定电子标签</span>
                            <span>545623</span>
                        </li>
                        <li>
                            <span>所在区域</span>
                            <span>东胜神洲</span>
                        </li>
                        <li>
                            <span>责任人</span>
                            <span>孙行者</span>
                        </li>
                        <li>
                            <span>报警开关</span>
                            <span>
                                <el-switch
                                    v-model="warnSwitch"
                                    active-color="#0CB5F6"
                                    inactive-color="#DCDFE6">
                                </el-switch>
                            </span>
                        </li>
                        <li>
                            <span>备注</span>
                            <span>已损坏</span>
                        </li>
                        <li>
                            <span>修改时间</span>
                            <span>1456-05-12</span>
                        </li>
                    </ul>
                    <p class="tc btns">
                        <el-button class="cancel" @click="handleAssetVisible = false">先找找</el-button>
                        <el-button type="primary">删除</el-button>
                    </p>
                </el-col>
            </el-row>
        </el-dialog>
        <!--移动了弹窗-->
        <el-dialog :visible.sync="moveAssetVisible" width="40%">
            <el-row class="dialog-handle">
                <el-col :span="8" class="left">
                    <div class="text tc">
                        <p class="title">立即处理</p>
                        <p>—— 固定资产转移了 ——</p>
                    </div>
                </el-col>
                <el-col :span="16" class="right">
                    <ul class="list tc">
                        <li>
                            <span>固定资产名称</span>
                            <span class="name">定海神针</span>
                        </li>
                        <li>
                            <span>原始位置</span>
                            <span class="number">东海龙宫</span>
                        </li>
                        <li>
                            <span>当前位置</span>
                            <span class="number">五行山</span>
                        </li>
                        <li>
                            <span>绑定电子标签</span>
                            <span>1122554</span>
                        </li>
                        <li>
                            <span>固定资产编号</span>
                            <span>132465898</span>
                        </li>
                        <li>
                            <span>责任人</span>
                            <span>东海龙王</span>
                        </li>
                        <li>
                            <span>报警开关</span>
                            <span>
                                <el-switch
                                    v-model="warnSwitch"
                                    active-color="#0CB5F6"
                                    inactive-color="#DCDFE6">
                                </el-switch>
                            </span>
                        </li>
                        <li>
                            <span>备注</span>
                            <span>已损坏</span>
                        </li>
                        <li>
                            <span>修改时间</span>
                            <span>1456-05-12</span>
                        </li>
                    </ul>
                    <p class="tc btns">
                        <el-button class="cancel" @click="moveAssetVisible = false">实地转移</el-button>
                        <el-button type="primary">一键转移</el-button>
                    </p>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
    import Header from '@/components/header'

    export default {
        name: "inventory",
        components: {
            Header
        },
        data() {
            return {
                handleAssetVisible: false,
                moveAssetVisible: false,
                warnSwitch: false,
                percent: 0,// 百分比
                temVal: 0,
                signLeft: '50%',
                signTop: '-35px;',
                timer: null,
            }
        },
        methods: {
            beginInventory() {
                this.temVal += 0.1
                if (this.percent === 100) {
                    clearInterval(this.timer)
                }
                this.percent = Math.round(this.temVal)
                let pH = (this.$refs.circle.offsetHeight - 10) / 2
                let left = pH * (1 + Math.sin(this.temVal / 100 * 2 * Math.PI))
                let top = pH * (1 - Math.cos(this.temVal / 100 * 2 * Math.PI))
                this.signLeft = left + 'px'
                this.signTop = top - 35 + 'px'
            },
            pause() {
                clearInterval(this.timer)
            },
        },
        mounted() {
            let timer = setTimeout(() => {
                clearTimeout(timer)
                this.timer = setInterval(this.beginInventory, 10)
            }, 1)
        },
        deactivated() {
            clearInterval(this.timer)
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../assets/css/color";

    $segment_left: #EFDFDF;
    $segment_right: #F1ECEC;
    .content {
        height: 90vh;
        .left {
            height: 90vh;
            background: $bg_black;
            .progress {
                height: 70%;
                padding-top: 1.5rem;
                box-sizing: border-box;
                .circle {
                    border: 0.1rem solid $strong_red;
                    width: 3rem;
                    height: 3rem;
                    border-radius: 50%;
                    margin: 0 auto;
                    position: relative;
                    .icon {
                        position: absolute;
                        margin-left: -32px;
                        width: 64px;
                        height: 64px;
                        background: url("../assets/images/spirit.png") no-repeat -398px -47px;
                    }
                    .text {
                        position: absolute;
                        top: 50%;
                        left: 16%;
                        margin-top: -0.20rem;
                        width: 0.5rem;
                        height: 0.5rem;
                        font-size: 0.2rem;
                        color: $white;
                    }
                    .percent {
                        position: absolute;
                        top: 52%;
                        left: 35%;
                        width: 1.55rem;
                        margin-top: -0.4rem;
                        height: 0.8rem;
                        font-size: 0.7rem;
                        font-weight: normal;
                        color: $strong_red;
                    }
                }
                .title {
                    margin-top: 0.6rem;
                    font-size: 0.18rem;
                    color: $white;
                }
            }
            .pause {
                margin-top: 1rem;
                width: 2.6rem;
                height: 0.6rem;
                font-size: 0.18rem;
                border: 0.02rem solid $white;
                background: transparent;
                color: $white;
                cursor: pointer;
            }
        }
        .right {
            height: 90vh;
            .content {
                height: 90vh;
                &.item {
                    .segment {
                        width: 0.2rem;
                        height: 100%;
                        background: linear-gradient(to right, $segment_left, $segment_right);
                    }
                    .item-content {
                        padding: 0.6rem 0.4rem;
                        box-sizing: border-box;
                        height: 100%;
                        .block {
                            .title {
                                height: 0.4rem;
                                line-height: 0.4rem;
                                font-size: 0.14rem;
                                color: $ph_color;
                                i {
                                    display: inline-block;
                                    width: 26px;
                                    height: 26px;
                                    vertical-align: middle;
                                    margin-top: -5px;
                                    background: url("../assets/images/spirit.png") no-repeat -198px -247px;
                                }
                                .area {
                                    font-size: 0.18rem;
                                    padding-right: 0.2rem;
                                    color: $font_color;
                                }
                                .status {
                                    color: $assets_gradient_b;
                                    padding-right: 0.15rem;
                                }
                            }
                            .detail {
                                padding: 0 0.3rem;
                                li {
                                    height: 30px;
                                    line-height: 30px;
                                    span {
                                        color: $ph_color;
                                        &:first-child {
                                            color: $font_color;
                                            padding-right: 0.2rem;
                                        }
                                    }
                                    i {
                                        float: right;
                                        width: 26px;
                                        height: 26px;
                                        background: url("../assets/images/spirit.png") no-repeat -46px -407px;
                                    }
                                    &.waiting i {
                                        background: url("../assets/images/inventory-loading.gif") no-repeat;
                                    }
                                    &.remind {
                                        span {
                                            color: $assets_gradient_b;
                                        }
                                        i {
                                            background-position: -91px -407px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                &.change-asset {
                    .not-fount {
                        height: 50%;
                        padding: 0.6rem 0.4rem;
                        box-sizing: border-box;
                        .title {
                            font-size: 0.18rem;
                            span {
                                font-size: 0.14rem;
                                color: $ph_color;
                            }
                        }
                        .list {
                            overflow: auto;
                            height: 100%;
                            margin: 0.1rem 0;
                            .item {
                                border: 1px solid $segment;
                                width: 3.3rem;
                                height: 1.2rem;
                                margin: 0.1rem;
                                padding: 0.2rem 0.25rem;
                                box-sizing: border-box;
                                position: relative;
                                box-shadow: 3px 3px 10px 0 $segment;
                                color: $ph_color;
                                p {
                                    margin: 0.1rem 0;
                                    &.name {
                                        color: $strong_red;
                                        font-size: 0.16rem;
                                    }
                                }
                                .button {
                                    position: absolute;
                                    right: 0.2rem;
                                    top: 40%;
                                    padding-left: 0.1rem;
                                    padding-right: 0.1rem;
                                }
                            }
                        }
                        &.move {
                            .list {
                                .item {
                                    height: 1.4rem;
                                }
                            }
                        }
                    }
                    .segment {
                        height: 2%;
                        background: linear-gradient(to bottom, $segment_left, $segment_right);
                    }
                    .move {
                        height: 48%;
                    }
                }
            }
        }
    }

    .dialog-handle {
        margin: -0.10rem -0.50rem;
        margin-top: -0.73rem;
        .left {
            height: 5rem;
            background: $bg_black;
            .text {
                width: 90%;
                margin: 0 auto;
                color: $white;
                white-space: nowrap;
                margin-top: 80%;
                .title {
                    color: $strong_red;
                    font-size: 0.16rem;
                }
            }
        }
        .right {
            .list {
                white-space: nowrap;
                width: 80%;
                margin: 0 auto;
                padding-top: 0.6rem;
                li {
                    height: 0.36rem;
                    span {
                        display: inline-block;
                        width: 1.3rem;
                        text-align: left;
                        white-space: nowrap;
                        padding-left: 0.2rem;
                        &:first-child {
                            color: $ph_color;
                        }
                        &.name {
                            color: $strong_red;
                        }
                        &.number {
                            color: $orange;
                        }
                    }
                }
            }
            .btns {
                padding-top: 0.5rem;
                .cancel {
                    border: 1px solid $bg_black;
                }
            }
        }
    }
</style>
